<template>
    <view class="container">
		<carHeader :title="'我的订单'"></carHeader>
        <view class="topTabBar">
            <view class="grid" v-for="(item, tbIndex) in handlingType" 
			:key="tbIndex" @tap="showType(tbIndex)">
                <view class="text" :class="[tbIndex == tabbarIndex ? 'active' : '']">{{ item.value }}</view>
            </view>
        </view>
        <view class="topTab">
            <view v-if="tabbarIndex==0" v-for="(item,index) in orderlist1" :key="index" class="item-block">
               <view class="order">
                    <view class="bianhao">
                    	<span>订单编号:24255252522</span>
						<view class="jiantou">
							>
						</view>
                    </view>
					<view class="middle">
						<view class="left">
							<view class="xiangmu">
								服务项目：车辆保养
							</view>
							<view class="mendian">
								服务门店：大宝车辆维修店
								<image src="../../static/车联网服务-05就近加油_slices/plane.png" mode="" class="plane"></image>
							</view>
							<view class="shijian">
								下单时间：2023-03-12 &nbsp12:09
							</view>
						</view>
						<view class="right">
							<view class="status">
								待评价
							</view>
						</view>
					</view>
					<view class="bottom">
						<view class="money">
							实付：230.56元
						</view>
						<view class="pay">
							<button class="btn1">立即评价</button>
							<button class="btn2">再来一单</button>
						</view>
					</view>
               </view>
			   <view class="order1">
					<view class="bianhao">
						<span>订单编号:24255252522</span>
						<view class="jiantou">
							>
						</view>
					</view>
					<view class="middle">
						<view class="left">
							<view class="xiangmu">
								服务项目：车辆保养
							</view>
							<view class="mendian">
								服务门店：大宝车辆维修店
								<image src="../../static/车联网服务-05就近加油_slices/plane.png" mode="" class="plane"></image>
							</view>
							<view class="shijian">
								下单时间：2023-03-12 &nbsp12:09
							</view>
						</view>
						<view class="right">
							<view class="status" style="color: #858585;">
								已取消
							</view>
						</view>
					</view>
					<view class="bottom">
						<view class="money">
							实付：230.56元
						</view>
						<view class="pay">
							<!-- <button class="btn1">立即评价</button> -->
							<button class="btn2">重新下单</button>
						</view>
					</view>
			   </view>
			   <view class="order2">
					<view class="bianhao">
						<span>订单编号:24255252522</span>
						<view class="jiantou">
							>
						</view>
					</view>
					<view class="middle">
						<view class="left">
							<view class="xiangmu">
								服务项目：车辆保养
							</view>
							<view class="mendian">
								服务门店：大宝车辆维修店
								<image src="../../static/车联网服务-05就近加油_slices/plane.png" mode="" class="plane"></image>
							</view>
							<view class="shijian">
								下单时间：2023-03-12 &nbsp12:09
							</view>
						</view>
						<view class="right">
							<view class="status" style="color: #858585;">
								已退款
							</view>
						</view>
					</view>
					<view class="bottom">
						<view class="money">
							实付：230.56元
						</view>
						<view class="pay">
							<!-- <button class="btn1">立即评价</button> -->
							<button class="btn2">再来一单</button>
						</view>
					</view>
			   </view>
			   <view class="order3">
					<view class="bianhao">
						<span>订单编号:24255252522</span>
						<view class="jiantou">
							>
						</view>
					</view>
					<view class="middle">
						<view class="left">
							<view class="xiangmu">
								服务项目：车辆保养
							</view>
							<view class="mendian">
								服务门店：大宝车辆维修店
								<image src="../../static/车联网服务-05就近加油_slices/plane.png" mode="" class="plane"></image>
							</view>
							<view class="shijian">
								下单时间：2023-03-12 &nbsp12:09
							</view>
						</view>
						<view class="right">
							<view class="status">
								已完成
							</view>
						</view>
					</view>
					<view class="bottom">
						<view class="money">
							实付：230.56元
						</view>
						<view class="pay">
							<!-- <button class="btn1">立即评价</button> -->
							<button class="btn2">再来一单</button>
						</view>
					</view>
			   </view>
            </view>
            
            <view v-if="tabbarIndex==1" v-for="(item,index) in orderlist2" :key="index" class="item-block">
               <view class="order">
                    <view class="bianhao">
                    	<span>订单编号:24255252522</span>
						<view class="jiantou">
							>
						</view>
                    </view>
					<view class="middle">
						<view class="left">
							<view class="xiangmu">
								服务项目：车辆保养
							</view>
							<view class="mendian">
								服务门店：大宝车辆维修店
								<image src="../../static/车联网服务-05就近加油_slices/plane.png" mode="" class="plane"></image>
							</view>
							<view class="shijian">
								下单时间：2023-03-12 &nbsp12:09
							</view>
						</view>
						<view class="right">
							<view class="status">
								待支付
							</view>
						</view>
					</view>
					<view class="bottom">
						<view class="money">
							实付：<span style="color:#FF4102 ;">230.56元</span>
						</view>
						<view class="pay">
							<button class="btn1">取消订单</button>
							<button class="btn2">立即支付</button>
						</view>
					</view>
               </view>
			   <view class="order1">
			        <view class="bianhao">
			        	<span>订单编号:24255252522</span>
						<view class="jiantou">
							>
						</view>
			        </view>
					<view class="middle">
						<view class="left">
							<view class="xiangmu">
								服务项目：车辆保养
							</view>
							<view class="mendian">
								服务门店：大宝车辆维修店
								<image src="../../static/车联网服务-05就近加油_slices/plane.png" mode="" class="plane"></image>
							</view>
							<view class="shijian">
								下单时间：2023-03-12 &nbsp12:09
							</view>
						</view>
						<view class="right">
							<view class="status">
								待支付
							</view>
						</view>
					</view>
					<view class="bottom">
						<view class="money">
							实付：<span style="color:#FF4102 ;">230.56元</span>
						</view>
						<view class="pay">
							<button class="btn1">取消订单</button>
							<button class="btn2">立即支付</button>
						</view>
					</view>
			   </view>
            </view>
			<view v-if="tabbarIndex==2" v-for="(item,index) in orderlist3" :key="index" class="item-block">
			   <view class="order">
			        <view class="bianhao">
			        	<span>订单编号:24255252522</span>
						<view class="jiantou">
							>
						</view>
			        </view>
					<view class="middle">
						<view class="left">
							<view class="xiangmu">
								服务项目：车辆保养
							</view>
							<view class="mendian">
								服务门店：大宝车辆维修店
								<image src="../../static/车联网服务-05就近加油_slices/plane.png" mode="" class="plane"></image>
							</view>
							<view class="shijian">
								下单时间：2023-03-12 &nbsp12:09
							</view>
						</view>
						<view class="right">
							<view class="status">
								待使用
							</view>
						</view>
					</view>
					<view class="bottom">
						<view class="money">
							实付：<span style="color:#FF4102 ;">230.56元</span>
						</view>
						<view class="pay">
							<button class="btn1">申请退款</button>
							<button class="btn2">扫码结算</button>
						</view>
					</view>
			   </view>
			   <view class="order1">
			        <view class="bianhao">
			        	<span>订单编号:24255252522</span>
						<view class="jiantou">
							>
						</view>
			        </view>
					<view class="middle">
						<view class="left">
							<view class="xiangmu">
								服务项目：车辆保养
							</view>
							<view class="mendian">
								服务门店：大宝车辆维修店
								<image src="../../static/车联网服务-05就近加油_slices/plane.png" mode="" class="plane"></image>
							</view>
							<view class="shijian">
								下单时间：2023-03-12 &nbsp12:09
							</view>
						</view>
						<view class="right">
							<view class="status">
								待使用
							</view>
						</view>
					</view>
					<view class="bottom">
						<view class="money">
							实付：<span style="color:#FF4102 ;">230.56元</span>
						</view>
						<view class="pay">
							<button class="btn1">申请退款</button>
							<button class="btn2">扫码结算</button>
						</view>
					</view>
			   </view>
			   <view class="order2">
			        <view class="bianhao">
			        	<span>订单编号:24255252522</span>
						<view class="jiantou">
							>
						</view>
			        </view>
					<view class="middle">
						<view class="left">
							<view class="xiangmu">
								服务项目：车辆保养
							</view>
							<view class="mendian">
								服务门店：大宝车辆维修店
								<image src="../../static/车联网服务-05就近加油_slices/plane.png" mode="" class="plane"></image>
							</view>
							<view class="shijian">
								下单时间：2023-03-12 &nbsp12:09
							</view>
						</view>
						<view class="right">
							<view class="status">
								待使用
							</view>
						</view>
					</view>
					<view class="bottom">
						<view class="money">
							实付：<span style="color:#FF4102 ;">230.56元</span>
						</view>
						<view class="pay">
							<button class="btn1">申请退款</button>
							<button class="btn2">扫码结算</button>
						</view>
					</view>
			   </view>
			</view>
			<view v-if="tabbarIndex==3" v-for="(item,index) in orderlist4" :key="index" class="item-block">
			   <view class="order">
			        <view class="bianhao">
			        	<span>订单编号:24255252522</span>
						<view class="jiantou">
							>
						</view>
			        </view>
					<view class="middle">
						<view class="left">
							<view class="xiangmu">
								服务项目：车辆保养
							</view>
							<view class="mendian">
								服务门店：大宝车辆维修店
								<image src="../../static/车联网服务-05就近加油_slices/plane.png" mode="" class="plane"></image>
							</view>
							<view class="shijian">
								下单时间：2023-03-12 &nbsp12:09
							</view>
						</view>
						<view class="right">
							<view class="status">
								待评价
							</view>
						</view>
					</view>
					<view class="bottom">
						<view class="money">
							实付：<span>230.56元</span>
						</view>
						<view class="pay">
							<button class="btn1">立即评价</button>
							<button class="btn2">再来一单</button>
						</view>
					</view>
			   </view>
			   <view class="order1">
			        <view class="bianhao">
			        	<span>订单编号:24255252522</span>
						<view class="jiantou">
							>
						</view>
			        </view>
					<view class="middle">
						<view class="left">
							<view class="xiangmu">
								服务项目：车辆保养
							</view>
							<view class="mendian">
								服务门店：大宝车辆维修店
								<image src="../../static/车联网服务-05就近加油_slices/plane.png" mode="" class="plane"></image>
							</view>
							<view class="shijian">
								下单时间：2023-03-12 &nbsp12:09
							</view>
						</view>
						<view class="right">
							<view class="status">
								待评价
							</view>
						</view>
					</view>
					<view class="bottom">
						<view class="money">
							实付：230.56元
						</view>
						<view class="pay">
							<button class="btn1">立即评价</button>
							<button class="btn2">再来一单</button>
						</view>
					</view>
			   </view>
			   <view class="order2">
			        <view class="bianhao">
			        	<span>订单编号:24255252522</span>
						<view class="jiantou">
							>
						</view>
			        </view>
					<view class="middle">
						<view class="left">
							<view class="xiangmu">
								服务项目：车辆保养
							</view>
							<view class="mendian">
								服务门店：大宝车辆维修店
								<image src="../../static/车联网服务-05就近加油_slices/plane.png" mode="" class="plane"></image>
							</view>
							<view class="shijian">
								下单时间：2023-03-12 &nbsp12:09
							</view>
						</view>
						<view class="right">
							<view class="status">
								待评价
							</view>
						</view>
					</view>
					<view class="bottom">
						<view class="money">
							实付：230.56元
						</view>
						<view class="pay">
							<button class="btn1">立即评价</button>
							<button class="btn2">再来一单</button>
						</view>
					</view>
			   </view>
			</view>
        </view>
    </view>
</template>
 
<script>
    var that;
    export default {
        data() {
            return {
				index:0,
				orderlist1:[
					{
						title:"内容1"
					}
				],
				orderlist2:[
					{
						title:"内容2"
					}
				],
				orderlist3:[
					{
						title:"内容3"
					}
				],
				orderlist4:[
					{
						title:"内容4"
					}
				],
                tabbarIndex:0,
                handlingType: [
                    {
                        value: '全部'
                    },
                    {
                        value: '待支付'
                    },
					{
					    value: '待使用'
					},
					{
					    value: '待评价'
					}
                ],
            };
        },
        methods: {
            showType(tbIndex) {
                that =this
                //跳转订单列表类型
                this.tabbarIndex = tbIndex;
                if(this.tabbarIndex == 0){
                  
                }
                if(this.tabbarIndex == 1){
                    
                }
                console.info(this.tabbarIndex)
            },
        }
    };
</script>
 
<style lang="scss">
    .topTabBar {
        width: 100%;
        height: 80rpx;
        display: flex;
        justify-content: space-around;
        position: fixed;
        top: 45px;
    }
    .grid {
        width: 20%;
        height: 80upx;
        display: flex;
        justify-content: center;
        align-items: center;
		color: white;
        font-size: 30rpx;
    }
    .text {
        height: 76rpx;
        display: flex;
        align-items: center;
    }
    .active {
        color: white;
        border-bottom: solid 4upx white;
    }
	.bianhao{
		display: flex;
		margin-top: 15rpx;
		margin-left: 20rpx;
		width: 640rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-bottom: 2px solid #eeeeee;
		font-size: 28rpx;
		justify-content: space-between;
	}
	.middle{
		margin-top: 15rpx;
		margin-left: 20rpx;
		width: 640rpx;
		border-bottom: 1px solid #eeeeee;
		height: 150rpx;
		display: flex;
		.mendian{
			display: flex;
			.plane{
				padding-left: 30rpx;
				width: 28rpx;
				height: 28rpx;
			}
		}
		.status{
			color:#1549FF;
			height: 140rpx;
			line-height: 140rpx;
			text-align: center;
			margin-left: 140rpx;
		}
	}
	.bottom{
		margin-top: 15rpx;
		margin-left: 20rpx;
		width: 640rpx;
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		justify-content: space-between;
		.pay{
			display: flex;
			margin-top: 10rpx;
			.btn1{
				height: 60rpx;
				line-height: 60rpx;
				font-size: 28rpx;
				margin-right: 20rpx;
				color: white;
				background-color: #BFBFBF;
			}
			.btn2{
				height: 60rpx;
				line-height: 60rpx;
				font-size: 28rpx;
				color: white;
				background-color: #1E72F0;
			}
		}
		
	}
	.order{
		width:700rpx;
		height:350rpx;
		background-color: #FFFFFF;
		border-radius: 25rpx;
		position: absolute;
		top:210rpx;
		right: 25rpx;
		
		
	}
	.order1{
		width:700rpx;
		height:350rpx;
		background-color: #FFFFFF;
		border-radius: 25rpx;
		position: absolute;
		top:580rpx;
		right: 25rpx;
	}
	.order2{
		width:700rpx;
		height:350rpx;
		background-color: #FFFFFF;
		border-radius: 25rpx;
		position: absolute;
		top:950rpx;
		right: 25rpx;
	}
	.order3{
		width:700rpx;
		height:350rpx;
		background-color: #FFFFFF;
		border-radius: 25rpx;
		position: absolute;
		top:1320rpx;
		right: 25rpx;
	}
    
</style>
                           